<template>
    <div class="list">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="50"
            >
            <van-cell v-for="item,i in list" :key="i">
                <button @click="a">点击</button>
                <div>{{item.mu_aname}}</div>
                <div>{{item.mu_pic}}</div>
                <div>{{item.mu_id}}</div>
                <div>{{item.mu_introduce}}</div>
            </van-cell>
        </van-list>
    </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      loading: false, 
      finished: false,
      page: 1
    };
  },
  methods: {
      a(){
          console.log(this.list);
      },
      onLoad(){
          console.log("onLoad");
          this.axios.get(`/congee/recommend/${this.page}`).then(result=>{
                console.log(result);
                let list = result.data.msg;

                this.list = [...this.list,...list];

                // 加载状态结束
                this.loading = false;

                if (this.list.length >= 36) {
                    this.finished = true;
                }
                this.page+=1;
          });
      }
  },
};
</script>

<style scoped>
.list {
    height: 500px;
}
</style>